<template>
  <el-descriptions
    class="global-descriptions"
    title="我的直属上级"
    border
    :column="1"
  >
    <template #extra>
      <el-button
        type="primary"
        @click="handleClickBindParent"
        :loading="loadData.update"
        >绑定上级</el-button
      >
    </template>
  </el-descriptions>

  <div style="height: 66px">
    <ProfilePanel
      v-if="detailData?.parent"
      :avatar="detailData.parent.avatar"
      :nickname="detailData.parent.nickname"
      :remark="detailData.parent.remark"
      isNav
    />
  </div>

  <el-descriptions
    class="global-descriptions"
    title="我的下级团队"
    border
    :column="1"
    style="margin-top: 16px"
    v-loading="isLoading"
  >
    <template #extra> 团队人数：{{ teamList?.length }}人 </template>
  </el-descriptions>

  <div style="height: calc(100% - 160px)">
    <el-scrollbar>
      <el-space wrap>
        <template v-for="item in teamList" :key="item.id">
          <ProfilePanel
            :avatar="item.avatar"
            :nickname="item.nickname"
            :remark="item.remark"
            isNav
          />
        </template>
      </el-space>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, h, PropType, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { updateUsers, getUserTeam } from '@/apis/users';

import SelectboxUser from '@/components/SelectboxUser.vue';

const isLoading = ref(false);

// props
const props = defineProps({
  rowData: {
    // type: Object as PropType<TempsPost>,
    type: Object as PropType<API.user.EntitySchema>,
    default: () => ({})
  },

  detailData: {
    // type: Object as PropType<TempsPost>,
    type: Object as PropType<API.user.EntitySchema>,
    default: () => ({})
  }
});

// emits
const emits = defineEmits(['onRefresh']);

// 团队列表
const teamList = ref<API.user.EntitySchema[]>();

// 加载状态
// const isLoading = ref(false);
const loadData = reactive({
  detail: false,
  update: false,
  unique: false
});

// btn - 绑定上级
const handleClickBindParent = () => {
  const parentOwnId = ref<string>('');

  ElMessageBox({
    title: '提示',
    message: () =>
      h('div', null, [
        h('div', { style: { marginBottom: '16px' } }, '请选择上级'),
        h(SelectboxUser, {
          modelValue: parentOwnId.value,
          'onUpdate:modelValue': (val: string) => {
            parentOwnId.value = val;
          }
        })
      ]),
    showCancelButton: true,
    cancelButtonText: '取消',
    confirmButtonText: '绑定'
  })
    .then(() => {
      // 绑定上级
      submitUpdateUser({ pid: parentOwnId.value });
    })
    .catch(() => {});
};

// 更新用户信息
const submitUpdateUser = (dataOpt: API.user.EntityDto) => {
  loadData.update = true;
  updateUsers(props.rowData.ownId!, dataOpt)
    .then(() => {
      loadData.update = false;
      ElMessage.success('绑定成功');
      // 刷新数据
      emits('onRefresh');
    })
    .catch(() => {
      loadData.update = false;
    });
};

// 获取下级团队
const requestDatabase = () => {
  isLoading.value = true;
  getUserTeam(props.rowData.ownId!)
    .then((res) => {
      isLoading.value = false;
      teamList.value = res.data;
    })
    .catch(() => {
      isLoading.value = false;
    });
};

requestDatabase();
</script>

<style lang="scss" scoped>
.wrapper-profile-panel {
  width: 256px;
  padding: 8px;
  // border: 1px solid var(--el-border-color);
  border: 1px solid var(--el-border-color-lighter);
}
</style>
